<template>
	<div class="appoint">
		<slot>
			<el-button type="primary" size="medium" @click="toOpenAppoint">委派</el-button>
		</slot>

		<el-dialog :visible.sync="visible" title="委 派" width="700px" append-to-body modal-append-to-body :close-on-click-modal="false">
			<el-form inline>
				<el-form-item label="加签方式">
					<el-radio v-model="positionType" label="pre">前加签</el-radio>
					<el-radio v-model="positionType" label="next">后加签</el-radio>
				</el-form-item>
			</el-form>

			<v-auditer v-model="selected" disDept authFlag="00" @on-confirm="onAuditerConfirm">
				<template #default="{list, open}">
					<div class="s-auditer" @click="open"></div>
					<el-table :data="list" border>
						<el-table-column label="名字" prop="name"></el-table-column>
					</el-table>
				</template>
			</v-auditer>

			<el-form>
				<el-form-item label="方式" v-if="selected.user.length > 1">
					<el-radio lable="00" v-model="delegateType">会签</el-radio>
					<el-radio label="01" v-model="delegateType">或签</el-radio>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="onCancel" size="medium" type="danger">取 消</el-button>
				<el-button :loading="loading" type="primary" size="medium" @click="onSubmit">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import request from "@/common/request"

export default {
	name: "appoint",
	props: {},
	data() {
		return {
			selected: {
				dept: [],
				user: [],
			},
			visible: false,
			delegateType: "00",
			auditer: [],
			positionType: "pre",
			loading: false,
		}
	},
	computed: {
		formData() {
			let delegateUsers = []
			let delegateOpinion = []

			this.auditer.forEach(item => {
				delegateUsers.push(item.id)
				delegateOpinion.push(item.name)
			})

			return {
				tid: this.$route.query.tid,
				id: this.$route.query.id,
				task: this.$route.query.task,
				delegateUsers: delegateUsers.join(),
				delegateType: this.delegateType,
				delegateOpinion: delegateOpinion.join(),
				positionType: this.positionType,
			}
		},
	},
	created() {},
	methods: {
		toOpenAppoint() {
			this.onRefresh()
			this.visible = true
		},
		async onSubmit() {
			if (this.loading) return
			this.loading = true
			try {
				await request("post", "/flowable/approves/delegateTask", this.formData)
				this.$message.success("委派成功")
				this.onCancel()
				this.$emit("on-success")
				this.$router.go(-1)
			} catch (error) {
				this.$message.error("委派失败")
			} finally {
				this.loading = false
			}
		},

		onAuditerConfirm(value, list) {
			this.auditer = list
		},
		onRefresh() {
			this.selected = {
				dept: [],
				user: [],
			}
		},
		onCancel() {
			this.visible = false
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.appoint {
	display: inline-block;
}
.s-auditer {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	position: relative;
	background: #ddd;
	cursor: pointer;
	margin-bottom: 15px;
	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 2px;
		height: 20px;
		background: #fff;
	}
	&::before {
		transform: rotate(90deg);
	}
}
</style>
